<template>
	<view class="test">
		<!-- 轮播图 -->
		<view class="swipper-cont">
			<swiper indicator-dots autoplay circular indicator-color="#fff">
				<swiper-item>
					<image
						src="https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/eaf97480-0547-41f7-bda9-330b2788a9ccimage/png">
					</image>
				</swiper-item>
				<swiper-item>
					<image
						src=" https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/f88acb0e-7a31-40d6-902f-1e462e9022feimage/png">
					</image>
				</swiper-item>
				<swiper-item>
					<image
						src="https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/2924b0d7-8a8d-44d6-9f39-66db31d58c4dimage/jpg">
					</image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 今日推荐 -->
		<view class="totay-title">
			<view></view>
			<view>今日推荐</view>
		</view>
		<view class="today-receve">
			<TodayComend :ToData="todayData"></TodayComend>
		</view>
		<!-- 全部试题 -->
		<view class="totay-title" style="margin-top: 50rpx;">
			<view></view>
			<view>全部试题</view>
		</view>
		<!-- 文章 -->
		<view class="my-essay">
			<Mytest></Mytest>
		</view>
	</view>
</template>

<script>
	// import TodayComend from '@/components/TodayComend.vue'
	import Mytest from '@/components/Mytest.vue'
	import TodayComend from '@/components/TodayComend.vue'
	export default {
		data() {
			return {
				todayData: [{
						img: 'https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/95a0d0b3-6e9e-4e53-9fbe-b5fb3d4f8f2cimage/jpg',
						textData: '24.4万人测过',
						bottomtitle: '探寻自我(问答\n题)'
					},
					{
						img: 'https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/456379d2-6781-41d5-9166-d5140fe26878image/jpg',
						textData: '30.1万人测过',
						bottomtitle: '九型人格测试\n(专业版)'
					},
					{
						img: ' https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/c02c0aa3-f20c-4e01-9d58-ea1f0a73d20aimage/jpg',
						textData: '9.7万人测过',
						bottomtitle: '职业性格测试'
					},

				],
				testList: [{
						backgrund: 'https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/95a0d0b3-6e9e-4e53-9fbe-b5fb3d4f8f2cimage/jpg',
						summary: '哈佛的心理学教授高尔曼为测试人类的情商而创造了一套测试题',
						title: '测试情商的十道题'
					},
					{
						backgrund: 'https://warmstill-1314066575.cos.ap-chengdu.myqcloud.com/warmstill/2022/11/10/456379d2-6781-41d5-9166-d5140fe26878image/jpg',
						summary: '挫折情商测试',
						title: '每个人在生活中都会不同程度地受到挫折，人们在受挫折后恢复的能力却各不相同'
					},
				],
				arcInfo: {
					category_id: '0',
					current: 1,
					orderByTime: '',
					size: 10,
					title: ''
				},
			}
		},
		components: {
			TodayComend,
			Mytest,
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.test {
		width: 750rpx;
		height: auto;

		.swipper-cont {
			width: 750rpx;
			height: 400rpx;

			swiper {
				width: 750rpx;
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		// 
		.totay-title {
			width: 300rpx;
			height: 70rpx;
			line-height: 70rpx;
			// background-color: antiquewhite;
			display: flex;
			margin-top: 15rpx;
			align-items: center;

			view {

				&:first-child {
					width: 7rpx;
					height: 50rpx;
					background-color: #dc5a5a;
					margin-right: 20rpx;
				}

				&:last-child {
					width: 200rpx;
					font-size: 35rpx;
					height: 70rpx;
					line-height: 70rpx;
				}

			}
		}

		// 
		.today-receve {
			width: 750rpx;
			height: 300rpx;
			// background-color: #dc5a5a;
		}

		// 
		.my-essay {
			width: 750rpx;
			// background-color: #dc5a5a;
			height: auto;
		}
	}
</style>
